//弹窗按钮
//将显示和隐藏两个状态下的显示图标路径放入images变量中
var images = ['../static/images/fd.png', '../static/images/fd2.png', '../static/images/close1.png', '../static/images/close2.png',
    'image:///static/images/perpo.png', 'image:///static/images/yellow.png'];
var ctr = document.getElementById('ctr');
var closePng = document.getElementById('closePng');
var popBox = document.getElementById("popBox");
var popLayer = document.getElementById("popLayer");

ctr.onmouseover = function () {
    $("#ctr").attr("src", images[1]);
}
ctr.onmouseout = function () {
    $("#ctr").attr("src", images[0]);
}
closePng.onmouseover = function () {
    $("#closePng").attr("src", images[3]);
}
closePng.onmouseout = function () {
    $("#closePng").attr("src", images[2]);
}

$(document).ready(function () {
    //通过id="ctr"获取元素click事件
    $("#ctr").click(function () {
        //通过class的值来判断控制显示的图标样式
        $("#ctr").attr("src", images[1]);
        $("#ctr").removeClass();
        console.log("打开")
        //弹框打开
        //由于display属于临时加载，echarts就获取不到宽高故选用visibility
        popBox.style.visibility = 'visible';// 显示弹框
        popLayer.style.visibility = 'visible';// 显示遮罩

    });
});

//弹框关闭按钮
function closeBox() {
    popBox.style.visibility = 'hidden';// 隐藏弹框
    popLayer.style.visibility = 'hidden';// 隐藏遮罩

    $("#ctr").attr("src", images[0]);
}

//高德地图关闭
function closeGd() {
    console.log("关闭高德地图")
    var gd = document.getElementById("gd");
    gd.style.visibility = 'hidden'//关闭高德地图
}

//渲染地图方法
function showCity(url) {
    $.getJSON(url, function (geoJson) {
        echarts.registerMap("chinaMap", geoJson);
        ec_center.setOption(ec_center_option);
    });
}



function likename_sandian(str1, str2) {
    if (str1 == null || str2 == null) {
        return false;
    }
    for (var i = 0; i <= str1.length - 1; i++) {

        if (str1.substr(i, 1) == "湖" || str1.substr(i, 1) == "河" || str1.substr(i, 1) == "西" || str1.substr(i, 1) == "阿" || str1.substr(i, 1) == "区" || str1.substr(i, 1) == "市" || str1.substr(i, 1) == "州" || str1.substr(i, 1) == "地") {
            if (i != str1.length - 1) {
                continue
            } else {
                return false;
            }

        }

        if (str2.indexOf(str1.substr(i, 1)) != -1) {

            return true;
        }
        else if (i == str1.length - 1) {

            return false;
        }


    }

}
//将dt数据转化为name;value
function downconvertData(data, province, type) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var flag = likename_sandian(province, data[i].province)
        if (flag) {
            // console.log("true")
            // console.log(data[i])
            if (data[i].type === type) {
                res.push({
                    name: data[i].city + data[i].county + data[i].address,
                    value: data[i].location,
                });
            }

        }

    }
    return res;
};

function convertData(data, type) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        if (data[i].type === type) {
            res.push({
                name: data[i].city + data[i].county + data[i].address,
                value: data[i].location,
            });
        }
    }
    return res;
}



var ec_center = echarts.init(document.getElementById('detailsMap'));

var ec_center_option = {

    legend: {
        selectedMode: true,
        //各标记图例
        orient: 'horizontal',
        id: 1,
        top: '95%',
        left: '35%',
        y: 'top',
        x: 'left',
        itemWidth: 50,
        itemHeight: 50,
        data: [
            {
                name: '高风险地区',
                icon: images[4],
            },

            {
                name: '中风险地区',
                icon: images[5],
                size: 0
            },
        ],
        textStyle: {
            color: '#fff',
            size: 50,
        },
    },

    title:
        [
            {
                subtext: '数据来源：腾讯疫情实时追踪',
                sublink: 'https://news.qq.com/zt2020/page/feiyan.htm#/',
                left: '0%',
                top: '20%',
                textStyle: {
                    color: '#fff',
                    fontSize: 25
                }
            },

        ],


    tooltip: {
        trigger: 'item'
    },

    //左侧小导航图标
    visualMap: {
        show: true,
        x: 'left',
        y: 'bottom',
        textStyle: {
            fontSize: 10,
            color: 'white'
        },

        showLabel: true,
        pieces: [
            {
                gt: 10000,
                label: '大于 10000 人确诊',
                color: '#0a2974',
            },
            {
                gt: 1000,
                lte: 10000,
                label: '1000 - 10000 人确诊',
                color: '#0315ad',
            },
            {
                gt: 100,
                lte: 1000,
                label: '100 - 1000 人确诊',
                color: '#085cb6',
            },
            {
                gt: 10,
                lte: 100,
                label: '10 - 100 人确诊',
                color: '#0073ff',
            },
            {
                gt: 0,
                lte: 10,
                label: '1 - 10 人确诊',
                color: '#037699',
            },
            {
                lte: 0,
                label: '无确诊',
                color: '#057369',
            },
        ],

    },
    geo: {
        map: "chinaMap",
        //修饰地图边框阴影
        itemStyle: {
            normal: {
                borderColor: 'rgba(128, 217, 248, 1)',
                borderWidth: 1,
                areaColor: 'rgba(128, 217, 248, 1)',
                shadowColor: 'rgba(128, 217, 248, 1)',
                shadowBlur: 20
            },
            // 移动到地图某模块的修饰
            emphasis: {
                areaColor: '#ffe603cb',
                borderWidth: 0,
            }

        },
        layoutCenter: ['45%', '55%'],//距离左右，上下距离的百分比
        layoutSize: '90%',//map百分比大小
    },

    //配置属性
    series: [
        {
            showLegendSymbol: false,//在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。
            name: '现确诊人数',
            type: 'map',
            map: "chinaMap",
            roam: false, //拖动和缩放
            legend: {
                show: true,
            },
            itemStyle: {
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: 'rgba(147, 235, 248, 1)',
                    shadowColor: 'rgba(128, 217, 248, 1)',
                },
                emphasis: { //鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#fff',
                    areaColor: "#fff",
                }
            },
            label: {
                normal: {
                    show: true, //省份名称
                    fontSize: 15,
                    color: "#fff"
                },
                emphasis: {
                    show: true,
                    fontSize: 15,
                }
            },
            // data:provinceData, //mydata //数据
            data: [],
            layoutCenter: ['45%', '55%'],//距离左右，上下距离的百分比
            layoutSize: '90%',//map百分比大小
        },


        //高风险地图散点
        {
            name: '高风险地区',
            type: 'scatter',
            coordinateSystem: 'geo',
            // data: redarea,
            data: [],
            symbol: images[4],
            symbolSize: function (val) {
                return 15.5;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function (params) {
                        return params.name;
                    },
                    position: 'right',
                    color: '#69A4D9',
                    fontSize: '5',
                },
                emphasis: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: '#4bbbb2',
                    borderWidth: 2,
                    borderColor: '#b4dccd',
                },
            },
        },
        //中风险地图散点
        {
            name: '中风险地区',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            symbol: images[5],
            symbolSize: function (val) {
                return 15.5;
            },
            label: {
                normal: {
                    show: false,
                    formatter: function (params) {
                        // console.log(params);
                        return params.name;
                    },
                    position: 'right',
                    color: '#69A4D9',
                    fontSize: '8',
                },
                emphasis: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    color: '#4bbbb2',
                    borderWidth: 2,
                    borderColor: '#b4dccd',
                },
            },
        },

    ]

};

window.addEventListener("resize", function () {
    ec_center.resize();
});

